<script setup>
import {useRoute, useRouter} from "vue-router";
import {Plus} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import useOrderStore from "@/store/modules/OrderStore.js";
import {showImagePreview} from "vant";
import {addPercentageInterval, INTERVAL_FIELD_NAME} from "@/utils/FileUtils.js";
import {FILE_URL_FIELD_NAME, fileUploadAPI, TIP_MSG_FIELD_NAME} from "@/api/file.js";
import {elErrorMessageTip, elSuccessMessageTip} from "@/utils/MessageTipUtils.js";
import {preview} from "vue3-image-preview";
import {commentAPI} from "@/api/order.js";
import {ORDER_LIST_ROUTE} from "@/router/routes/order/OrderList.js";
import {liuAPI} from "@/api/liu.js";

const route = useRoute()
const router = useRouter()

// *******
// * 返回 *
// *******
const goBack = () => {
  router.back()
}

const content = ref('')

// ***********
// * 商品图片 *
// ***********
const imgList = ref([])
// 商品图片索引
let imgIdx = 0
const imgUploadHandler = async (file, fileList) => {
  file = reactive(file)
  fileList.value.push(file)
  file.status = 'uploading'
  file['idx'] = imgIdx++
  // 文件上传进度计时器
  addPercentageInterval(file)
  // 文件上传
  const res = await fileUploadAPI(file.raw)
  if (res.status) {
    // 成功
    // 清除计时器
    clearInterval(file[INTERVAL_FIELD_NAME])
    elSuccessMessageTip(res[TIP_MSG_FIELD_NAME])
    file.status = 'success'
    file.percentage = 100
    file.url = res[FILE_URL_FIELD_NAME]
  } else {
    // 失败
    // 清除计时器
    clearInterval(file[INTERVAL_FIELD_NAME])
    elErrorMessageTip(res[TIP_MSG_FIELD_NAME])
    file.status = 'fail'
  }
}
// 商品图片上传
const imgUpload = (file) => {
  imgUploadHandler(file, imgList)
}
// 图片预览
const imgPreview = (img) => {
  preview({images: imgList.value, index: imgIdx})
}

const liuHandler = async () => {
  if (content.value.length <= 0) {
    elErrorMessageTip("留言内容不能为空")
    return
  }
  const res = await liuAPI(
      content.value,
      imgList.value.map(i => i.url)
  )
  if (res) {
    router.back()
  }
}
</script>

<template>
  <div class="liu-yan pb-20">
    <van-nav-bar
        :title="'发表留言'"
        left-text="返回"
        left-arrow fixed
        @click-left="goBack"
        placeholder
    ></van-nav-bar>
    <van-cell-group inset title="留言">
      <div>
        <van-field
            v-model="content"
            rows="1"
            autosize
            label=""
            maxlength="255"
            show-word-limit
            clearable
            type="textarea"
            placeholder="请输入商品评价"
        />
      </div>
    </van-cell-group>
    <van-cell-group inset title="图片上传">
      <div class="p-2">
        <el-upload
            class="uploader"
            v-model:file-list="imgList"
            list-type="picture-card"
            :auto-upload="false"
            multiple
            :on-change="imgUpload"
            :on-preview="imgPreview"
        >
          <el-icon>
            <Plus/>
          </el-icon>
        </el-upload>
      </div>
    </van-cell-group>
    <div class="fixed bottom-0 left-0 w-full p-2 bg-white dark:bg-neutral-900 flex justify-end">
      <div class="ml-2">
        <van-button @click="liuHandler" type="primary" round>发表留言</van-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>